<template>
<div class="skeleton section">
    <div class="skeleton-block">
        <div class="skeleton-line p-20 h-28"></div>
        <div class="skeleton-gap"></div>
        <div class="skeleton-line p-80 h-28"></div>
    </div>

    <div class="skeleton-img"></div>

    <div class="skeleton-block">
        <div class="skeleton-line p-20 h-28"></div>
        <div class="skeleton-gap"></div>
        <div class="skeleton-line p-80 h-28"></div>
    </div>

    <div class="skeleton-block flex" style="margin-top: 10px;">
        <div class="skeleton-cover"></div>
        <div class="skeleton-gap"></div>
        <div class="block" style="flex: 1;">
            <div class="skeleton-line p-100 h-28"></div>
            <div class="skeleton-line p-100 h-28"></div>
            <div class="skeleton-line p-80 h-28"></div>
        </div>
    </div>

    <div class="skeleton-block flex" style="margin-top: 10px;">
        <div class="skeleton-cover"></div>
        <div class="skeleton-gap"></div>
        <div class="block" style="flex: 1;">
            <div class="skeleton-line p-100 h-28"></div>
            <div class="skeleton-line p-100 h-28"></div>
            <div class="skeleton-line p-80 h-28"></div>
        </div>
    </div>

    <div class="skeleton-block flex" style="margin-top: 10px;">
        <div class="skeleton-cover"></div>
        <div class="skeleton-gap"></div>
        <div class="block" style="flex: 1;">
            <div class="skeleton-line p-100 h-28"></div>
            <div class="skeleton-line p-100 h-28"></div>
            <div class="skeleton-line p-80 h-28"></div>
        </div>
    </div>
</div>
</template>
<style lang="less">
	.skeleton {
	    &.page {
	        position: fixed;
	        width: 100vw;
	        height: 100vh;
	        top: 0;
	        background: #fff;
	        z-index: 1000;
	        padding: 15px;
	        box-sizing: border-box;
	    }
	
	    &.section {
	        position: fixed;
	        width: 100vw;
	        height: 100vh;
	        top: 0;
	        background: #fff;
	        z-index: 1000;
	        padding: 15px;
	        box-sizing: border-box;
	    }
	
	    @keyframes skeleton-loading {
	        0% {
	            background-position: 100% 50%;
	        }
	
	        100% {
	            background-position: 0 50%;
	        }
	    }
	
	    .skeleton-gap {
	        width: 16px;
	    }
	
	    .skeleton-line {
	        height: 46px;
	        margin: 5px 0;
	        animation: skeleton-loading 1.4s linear infinite;
	        background-image: linear-gradient(50deg, #F1F3F4, #F1F3F4 52%, #f0f0f0 55%, #F1F3F4 58%, #F1F3F4);
	        background-size: 400% 100%;
	
	        &.p-10 {
	            width: 10%;
	        }
	
	        &.p-20 {
	            width: 20%;
	        }
	
	        &.p-30 {
	            width: 30%;
	        }
	
	        &.p-40 {
	            width: 40%;
	        }
	
	        &.p-50 {
	            width: 50%;
	        }
	
	        &.p-60 {
	            width: 60%;
	        }
	
	        &.p-70 {
	            width: 70%;
	        }
	
	        &.p-80 {
	            width: 80%;
	        }
	        &.p-100 {
	            width: 100%;
	        }
	
	        &.h-28 {
	            height: 28px;
	        }
	
	        &.auto-left {
	            margin-left: auto;
	        }
	    }
	
	    .skeleton-circle {
	        width: 52px;
	        height: 52px;
	        border-radius: 50%;
	        background: #F1F3F4;
	    }
	
	    .skeleton-img {
	        height: 200px;
	        background: #F1F3F4;
	        margin: 5px 0;
	    }
	
	    .skeleton-cover {
	        width: 232px;
	        height: 146px;
	        background: #F1F3F4;
	    }
	
	    .skeleton-video {
	        width: 341px;
	        height: 192px;
	        background: #F1F3F4;
	    }
	
	    .skeleton-block {
	        display: flex;
	        align-items: center;
	
	        &.flex {
	            display: flex;
	        }
	    }
	
	    .block {
	        overflow: hidden;
	        &.video {
	            width: 49%;
	            float: left;
	            &:nth-child(2n) {
	                margin-left: 2%;
	            }
	        }
	    }
	}
</style>